<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成网</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 页面结构 -->
<!-- 头部 -->
 <header>
   <!-- 学成网图片 -->
   <div class="tupian">
        <!-- logo -->
         <div class="logo">
            <img src="./images/logo-xuecheng.png" alt="logo">
         </div>
   </div>
    <!-- 导航栏 -->
   <div class="navbar">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
   </div>
     <!--个人中心 -->
   <div class="profile">
        <a href="#">个人中心<img src="./images/ling_06.png" alt=""></a>
        <a href="#"><img src="./images/tou_03.png">qq-leishui</qq-leishui></a>
   </div>
   <!-- 搜索框的整个部分 -->
   <div class="search">
        <form action="">
            <input type="text" placeholder="请输入关键字">
            <input type="submit" value="">
        </form>
   </div>

 </header>
<!-- 广告宣传部分 -->
 <div class="banner">
   <!-- 整个内部 -->
   <div class="container">
      <!-- 左侧导航 -->
      <div class="leftnav">
         <ul>
            <li><a href="">前端开发<span>></span></a></li>
            <li><a href="">后端开发<span>></span></a></li>
            <li><a href="">移动开发<span>></span></a></li>
            <li><a href="">人工智能<span>></span></a></li>
            <li><a href="">商业预测<span>></span></a></li>
            <li><a href="">云计算&大数据<span>></span></a></li>
            <li><a href="">运维&从测试<span>></span></a></li>
            <li><a href="">UL设计<span>></span></a></li>
            <li><a href="">产品<span>></span></a></li>
         </ul>
      </div>
      <!-- 我的课程表 -->
       <div class="course">
         <h2>我的课程表</h2>
         <!-- 所选课程的内容 -->
          <div class="content">
            <ul>
               <li>
                  <h4>继续学习程序语言设计</h4>
                  <p>正在学习-适用对象</p>
               </li>
               <li>
                  <h4>继续学习程序语言设计</h4>
                  <p>正在学习-适用对象</p>
               </li>
               <li>
                  <h4>继续学习程序语言设计</h4>
                  <p>正在学习-适用对象</p>
               </li>
            </ul>
            <a href="#" class="more">全部课程</a>
          </div>
       </div>
       <!-- 轮播圆点 -->
       <ul class="circle">
         <li class="current"></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
       </ul>
   </div>
 </div>
 <!-- 顶部精品推荐 -->
<div class="recommend container clearfix">
   <a href="">精品推荐</a>
   <a href="">Jquery</a>
   <a href="">Spart</a>
   <a href="">MySql</a>
   <a href="">javaWeb</a>
   <a href="">MySql</a>
   <a href="">javaWeb</a>
   <a href="">修改兴趣</a>
</div>
<!-- 精品推荐课程 -->
 <div class="recommend-couser container">
   <div class="recommend-hd">
      <h4>精品推荐</h4>
      <a href="查看全部"></a>
   </div>
   <div class="recommend-bd clearfix">
      <ul>
         <li>
            <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
            <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
             <img src="images/icon1.png" alt="">
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>• 1000人在学习</p>
         </li>
         <li>
            <img src="images/icon1.png" alt="">
           <h5>Think PHP 5.0 博客系统实战项目演练</h5>
           <p><span>高级</span>• 1000人在学习</p>
        </li>
      </ul>
   </div>
 </div>
 <div class="outside">
   <ul>
      <li><a href="#">编程入门</a></li>
      <li><a href="#">数据分析师</a></li>
      <li><a href="#">机器学习工程师</a></li>
      <li><a href="#">前端开发工程师</a></li>
      <li><a href="#">人工智能工程师</a></li>
      <li><a href="#">全线工程师</a></li>
      <li><a href="#">IOS工程师</a></li>
      <li><a href="#">VR工程师</a></li>
      <li><a href="#">深度学习</a></li>
      <li><a href="#">商业预测分析</a></li>
      <li><a href="#">Android开发工程群</a></li>
   </ul>
 </div>
 <!-- 编程入门内容 -->
 <div class="program container">
   <!--  头部 -->
   <div class="program-hd  clearfix">
       <h4>编程入门</h4>
       <ul>
           <li><a href="#">热门</a></li>
           <li><a href="#">初级</a></li>
           <li><a href="#">中级</a></li>
           <li><a href="#">高级</a></li>
       </ul>
       <a href="#">查看全部</a>
   </div>
   <!-- 主题部分 -->
   <div class="program-bd clearfix">
       <div class="program-bd-l">
           <img src="images/rumen1.png" alt="">
       </div>
       <div class="program-bd-r">
           <div class="program-bd-r-top">
               <img src="images/rumen2.png" alt="">
           </div>
           <div class="program-bd-r-bottom">
               <ul>
                   <li>
                       <div class="over"><img src="images/rumen3.png" alt=""></div>
                       <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                       <p><span>高级</span> • 1125人在学习</p>
                   </li>
                   <li>
                       <div class="over"><img src="images/rumen3.png" alt=""></div>
                       <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                       <p><span>高级</span> • 1125人在学习</p>
                   </li>
                   <li>
                       <div class="over"><img src="images/rumen3.png" alt=""></div>
                       <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                       <p><span>高级</span> • 1125人在学习</p>
                   </li>
                   <li>
                       <div class="over"><img src="images/rumen3.png" alt=""></div>
                       <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                       <p><span>高级</span> • 1125人在学习</p>
                   </li>
               </ul>
           </div>
       </div>
   </div>
</div>

<!-- 页面底部 -->
<div class="footer">
   <div class="footer-in container">
       <div class="footer-l">
           <img src="images/logo-xuecheng.png" alt="">
           <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
               © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
           <a href="#">下载APP</a>
       </div>
       <div class="footer-r">
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">关于</a></dd>
               <dd><a href="#">管理团队</a></dd>
               <dd><a href="#">工作机会</a></dd>
               <dd><a href="#">客户服务</a></dd>
               <dd><a href="#">帮助</a></dd>
           </dl>
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">关于</a></dd>
               <dd><a href="#">管理团队</a></dd>
               <dd><a href="#">工作机会</a></dd>
               <dd><a href="#">客户服务</a></dd>
               <dd><a href="#">帮助</a></dd>
           </dl>
           <dl>
               <dt>关于学成网</dt>
               <dd><a href="#">关于</a></dd>
               <dd><a href="#">管理团队</a></dd>
               <dd><a href="#">工作机会</a></dd>
               <dd><a href="#">客户服务</a></dd>
               <dd><a href="#">帮助</a></dd>
           </dl>
       </div>
   </div>
</div>


</body>
</html>